<script setup lang="ts">
import { h, ref, reactive } from 'vue';
import type {VueElement} from 'vue';
import type { MenuProps, ItemType } from 'ant-design-vue';
import {useRouter} from 'vue-router';

const $router = useRouter();

function getItem(
  label: VueElement | string,
  key: string,
  icon?: any,
  children?: ItemType[],
  type?: 'group',
): ItemType {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as ItemType;
}

const items: ItemType[] = reactive([
  getItem('第一章节', 'demo', undefined, [
    getItem('第一个场景', '/'),
    getItem('材质和光照', '/chapter1/2'),
		getItem('材质和光照ds', '/chapter1/2-1'),
		getItem('材质、光照和动画', '/chapter1/3'),
		getItem('性能监控', '/chapter1/4'),
		getItem('交互控制', '/chapter1/5'),
		getItem('响应窗口变化', '/chapter1/6'),
  ]),
	getItem('第二章节', 'demo2', undefined, [
	  getItem('基础场景', '/chapter2/1'),
		getItem('雾化场景', '/chapter2/2'),
		getItem('重写材质', '/chapter2/3'),
		getItem('常见几何体', '/chapter2/4'),
		getItem('更改几何体的属性', '/chapter2/5'),
		getItem('相机切换', '/chapter2/6'),
		getItem('相机跟随', '/chapter2/7')
	]),
	getItem('第三章节', 'demo3', undefined, [
	  getItem('环境光', '/chapter3/1'),
		getItem('点光源', '/chapter3/2'),
		getItem('聚光灯', '/chapter3/3'),
		getItem('平行光', '/chapter3/4')
	]),
	getItem('小车', '/car')
]);

const current = ref<string[]>(['/']);

const handleClick: MenuProps['onClick'] = e => {
  console.log('click', e);
	
	const {key} = e;
	
	$router.push(key as string);
};
</script>

<template>
	<a-menu 
		v-model:selectedKeys="current" 
		mode="horizontal" 
		:items="items" 
		style="position: fixed; left: 100px; width: auto; height: 40px;" 
		@click="handleClick"
	/>
  <router-view />
</template>

<style scoped>
</style>
